<template>
  <div class="dgtPage">
    <div class="yrtcbj" v-if="state.statusShow">
      <div class="dgn">
        <img v-if="state.statusIndex && state.statusState === '0'" class="dgn" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/gdn.png" alt=""></img>
        <img v-if="!state.statusIndex  && state.statusState === '0'" class="dgn" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/dgnn.png" alt=""></img>

        <img v-if="state.statusIndex && state.statusState === '1'" class="dgn" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/ygn.png" alt=""></img>
        <img v-if="!state.statusIndex  && state.statusState === '1'" class="dgn" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/ygnn.png" alt=""></img>

        <img v-if="state.statusIndex && state.statusState === '2'" class="dgn" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/gkn.png" alt=""></img>
        <img v-if="!state.statusIndex  && state.statusState === '2'" class="dgn" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/gknn.png" alt=""></img>
      </div>
      <img class="left" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/zuo.png" alt="" @click="state.statusIndex = !state.statusIndex">
      <img class="right" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/you.png" alt="" @click="state.statusIndex = !state.statusIndex">
      <img class="fanhui" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/fanhui.png" alt="" @click="router.push({path:'/home'})"></img>
      <img class="queren" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/queren.png" alt="" @click="statusShowFun"></img>
    </div>
    <div class="formBox" v-show="state.formBoxShow">
      <div class="formList">
        <div class="titleBox">
          <img class="titleImg" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/xmimg.png" alt="">
        </div>
        <div class="nameBox" @click.stop="handleFocus1">
          <el-input ref="refInput1"  v-if="stateMixin.nameShow" v-model="stateMixin.name" @blur="blurNameFun" placeholder="姓名"/>
        </div>
        <div class="titleBox">
          <img class="titleImg" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/xzqy.png" alt="">
        </div>
        <div class="districtBox" @click.stop="handleFocus2">
          <div style="margin-left: 16px;margin-top: 2px;color: #1a1a1a" v-if="stateMixin.districtShow">{{ stateMixin.district }}</div>
        </div>
        <div class="titleBox">
          <img class="titleImg" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/sjhm.png" alt="">
        </div>
        <div class="sjBox" @click.stop="handleFocus3">
          <el-input ref="refInput3"  v-if="stateMixin.phoneShow" v-model="stateMixin.phone" @blur="blurPhoneFun" placeholder="手机号码"/>
        </div>
        <div class="titleBox">
          <img class="titleImg" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/yzm.png" alt="">
        </div>
        <div class="codeBox" @click.stop="handleFocus4">
          <el-input ref="refInput4"  v-if="stateMixin.codeShow" v-model="stateMixin.code" @blur="blurCodeFun" placeholder="验证码"/>
          <div class="hqyzmk">
            <img v-show="stateMixin.codeBtnTextShow === 120" class="hqyzm" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/hqyam.png" alt="" @click="reviewCodeFun">
            <div v-show="stateMixin.codeBtnTextShow !== 120" class="hqyzm" style="color: white">{{ stateMixin.codeBtnTextShow }}</div>
          </div>
        </div>
        <div class="xyBox">
          <el-checkbox-group v-model="stateMixin.checkList">
            <el-checkbox label="" value="checkList" />
          </el-checkbox-group>
          <img src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/rdty.png" alt="">
          <img src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/xxzc.png" alt="" @click="chankanxieyi">
        </div>
      </div>
      <div class="btnList">
        <img src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/fanhui.png" alt="" @click="state.formBoxShow = false;state.statusShow = true">
        <img src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/queren.png" alt="" @click="reviewUserFun(state.statusIndex)">
      </div>
    </div>
    <div v-if="state.articleContentShow"  class="zcxx">
      <img class="sqxxzc" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/sqxxzc.png" alt="">
      <img class="gb" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/gb.png" alt="" @click="chankanxieyi">
      <div class="nerrong" v-html="state.articleContent"></div>
    </div>
    <el-drawer v-model="stateMixin.drawer" direction="btt" :show-close="false">
      <template #header>
        <div style="text-align: center"> 请选择地区 </div>
      </template>
      <template #default>
        <div class="diquItem" style="padding: 8px" v-for="(item,index) of state.diquList" :key="index" @click="selectAreac(item)">{{ item }}</div>
      </template>
      <template #footer>

      </template>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import { reactive,ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {articleDetail, reviewCode, reviewProvince} from "/@/api/api";
import { standingMounted } from './mixin'
import {ElMessage} from "element-plus";
import {Local,Session} from '../../utils/storage'
const router = useRouter()
const refInput4 = ref()
const refInput3 = ref()
const refInput1 = ref()
const {
  stateMixin,
  handleFocus1,
  handleFocus2,
  handleFocus3,
  handleFocus4,
  blurNameFun,
  blurPhoneFun,
  codeBtnTextShowFun,
  blurCodeFun,
  selectAreac,
  reviewUserFun
} = standingMounted([
  refInput1,refInput3,refInput4
])
const state = reactive({

  drawer:false,
  diquList:[],
  articleContent:'',
  articleContentShow:false,
  statusIndex:true,
  statusState:'',
  statusShow:true,
  formBoxShow:false
})

const statusShowFun = () => {
  if(Local.get('userInfo')){
    Local.set('sex',state.statusIndex ? '0':'1')
    router.push({
      path: '/copywriting'
    })
  } else {
    state.statusShow = false
    state.formBoxShow = true
  }

}
const reviewCodeFun = () => {
  reviewCode({mobile:stateMixin.phone}).then((res:any) => {
    if(res.data.code === 1){
      codeBtnTextShowFun()
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}
const articleDetailFun = () =>{
  articleDetail({article_id:'10001'}).then((res:any) =>{
    if(res.data.code === 1){
      state.articleContent = res.data.data.detail.article_content
    }
  })
}
const chankanxieyi = () =>{
  state.articleContentShow = !state.articleContentShow
  state.formBoxShow = !state.formBoxShow
}
const reviewProvinceFun = () =>{
  reviewProvince({}).then((res:any) =>{
    console.log(res)
    if(res.data.code === 1){
      state.diquList = res.data.data.province
    }
  })
}

onMounted(()=>{
  reviewProvinceFun()
  articleDetailFun()
  state.statusState = Session.get('token')
})
</script>

<style scoped lang="scss">
.diquItem{
  color: black;
}
.diquItem:active{
  background-color: #888888;

}
:deep(.el-drawer__header){
  margin-bottom:0!important;
  padding:8px !important;
}
.dgtPage{
  width: 100%;
  height: 100%;
  background: url("https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/bc.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  .yrtcbj{
    width: 95%;
    height: 64%;
    background: url("https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/yrtcbc.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    top: -25px;
    .dgn{
      width: 75%;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
      img{
        width: 100%;
      }
    }
    .left{
      width: 15%;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 15%;
      z-index: 10;
    }
    .right{
      width: 15%;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      right: 0;
      z-index: 10;
    }
    .fanhui{
      width: 40%;
      transform: translate(-50%, -50%);
      position: absolute;
      bottom: -50px;
      left: 28%;
    }
    .queren{
      width: 40%;
      transform: translate(-50%, -50%);
      position: absolute;
      bottom: -50px;
      right: -12%;
    }
  }
  .formBox{
    width: 95%;
    height: 520px;
    background: url("https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/yrtcbc.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    top: -25px;
    .formList{
      box-sizing: border-box;
      padding: 40px 60px 0 60px;
      .titleBox{
        margin-top: 16px;
        display: flex;
        justify-content: left;
        padding-left: 10px;
        .titleImg{
          width: auto;
          height: 20px;
        }
      }
      :deep(.el-input__wrapper){
        border-radius: 50px !important;
        border: 1px solid black;
      }
      :deep(.el-input__inner){
        font-size: 18px;
        //text-align: center;
      }
      :deep(.el-input){
        width: 100%;
        height: 40px;
        border-radius: 40px !important;
      }
      .nameBox,.sjBox,.codeBox{
        //position: absolute;
        margin-top: 8px;
        height: 40px;
        z-index: 99;
        background: url("https://vivo.zhongwangyingtong.com/vivoimage/assets/image/xmsr.png");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;

      }
      .codeBox{
        position: relative;
        .hqyzmk{
          width: 38%;
          height: 29px;
          z-index: 100;
          background: url('https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/hqyzmk.png');
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 6px;
          top: 5px;
          .hqyzm{
            width: 80%;
          }
        }
      }
      .districtBox{
        //position: absolute;
        margin-top: 8px;
        height: 40px;
        z-index: 99;
        background: url("https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/xzqyk.png");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
      }
      .xyBox{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
        img{
          height: 15px;
        }
      }
    }
    .btnList{
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 40px;
      margin-top: 20px;
      img{
        width: 47%;
      }
    }
  }
  .zcxx{
    width: 90%;
    height: 70%;
    background: url("https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/zcBc.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    top: -25px;
    //text-align: left;
    //overflow: auto;
    .sqxxzc{
      margin-top: 13px;
      height: 25px;
    }
    .gb{
      position: absolute;
      transform: translate(-50%, -50%);
      width: 40px;
      right: -27px;
      top: 10px;
    }
    .nerrong{
      box-sizing: border-box;
      margin: 16px;
      color: black;
      text-align: left;
      overflow: auto;
      height: 83%;
    }
  }
}
</style>
